---
path: /form/switch
name: switch
title: Switch 开关
---


<div class="sys-ctx-main-left">

# Switch 开关\{#title\}

## 代码演示 \{#sp-demos\}

::demos{columns=2}

:::demo[基础用法]{id='base' src='/form/switch/1base.demo.tsx'}

基础用法

:::


:::demo[禁用]{id='disabled' src='/form/switch/2disabled.demo.tsx'}

使用 `disabled` 进行禁用

:::


:::demo[尺寸]{id='size' src='/form/switch/3size.demo.tsx'}

`size` 支持`large` `small`

:::


:::demo[加载中]{id='loading' src='/form/switch/4loading.demo.tsx'}

`loading` 为加载中状态，不可切换

:::


:::demo[文字和值]{id='label' src='/form/switch/5label.demo.tsx'}

`labels` 传入数组 修改文案， `values` 数组修改值

:::



:::demo[阻止切换]{id='before' src='/form/switch/6before.demo.tsx'}

`onBeforeChange` 可以在切换之前判断是否需要切换， 返回 `false` 阻止切换

:::



## 属性 \{#props\}

| 属性 | 说明 | 类型 | 默认值 |
| :--- | :---- | :--- | :--- |
|classList|自定义class|Object|-|
|class|自定义class|string|-|
|style|自定义样式|Object||
|name|name属性|string||
|value|值，可控属性|Signal||
|disabled|禁用|boolean||
|checked|默认是否开启|any||
|size|尺寸大小|small、large||
|loading|加载中状态，不可切换|boolean||
|labels|开关的文案|string[]||
|onBeforeChange|阻止操作钩子， 参数 v：boolean|Function||
|onChange|值改变事件|Function||


## 事件 \{#events\}

| 事件名称 | 说明 | 返回值|
| :--- | :---- | :--- |
|`onChange`|值改变事件|value: any|

</div>

